<script lang="ts" setup>


const props = defineProps({
  accountUuid: String,
  userUuid: String,
})
const emit = defineEmits(['done'])
const visible = defineModel<boolean>()

const formRef = ref(null)
const authPhoneRef = ref(null)
const authEmailRef = ref(null)
const loading = ref(false)
const mfaTypes = reactive({
  Phone: '短信验证',
  Email: '邮箱验证',
  Google: '虚拟MFA',
})
const form = reactive({
  mfaType: 'Phone',
  safeCode: '',
  phone: '',
  email: '',
  phoneCode: '',
  emailCode: '',
  imageCode: '',
  uuid: '',
  ga: '',
})

const rules = {
  safeCode: [
    { required: true, message: '请输入安全码', trigger: ['blur'] },
  ],
}

async function getMfaInfo() {
  const { ga, phone, defaultMfaType, email } = await useRequest('GetAccountMFADetail', {
    isLogin: false,
    accountUuid: props.accountUuid,
    userUuid: props.userUuid,
  }) as any
  Object.assign(form, {
    ga,
    phone,
    email,
    mfaType: ['Phone', 'Google', 'Email'].includes(defaultMfaType) ? defaultMfaType : 'Phone',
  })
}

watch(visible, (val) => {
  if (val)
    getMfaInfo()
  else
    Object.assign(form, {})
})

async function confirm() {
  loading.value = true
  const params = {
    mfaType: form.mfaType,
    mfaCode: form.phoneCode,
  }
  /** 手机验证 */
  if (form.mfaType === 'Phone') {
    const { code } = await authPhoneRef.value?.checkPhoneCode()
    params.mfaCode = code
  }
  else if (form.mfaType === 'Email') {
    const { code } = await authEmailRef.value?.checkCode()
    params.mfaCode = code
  }
  else {
    formRef.value?.validateField('safeCode', () => {
      params.mfaCode = form.safeCode
    })
  }
  loading.value = false

  emit('done', params)
}
</script>

<template>
  <el-dialog
    v-model="visible"
    title="安全验证"
    width="400px"
    append-to-body
    :close-on-click-modal="false"
  >
    <el-form
      v-if="visible"
      ref="formRef"
      :model="form"
      label-width="100px"
      :rules="rules"
    >
      <el-form-item label="安全类型">
        <el-radio-group v-model="form.mfaType">
          <el-radio-button v-for="(item, key) in mfaTypes" :key="key" :value="key">
            {{ item }}
          </el-radio-button>
        </el-radio-group>
      </el-form-item>
      <!-- 手机验证 -->
      <AuthPhone v-if="form.mfaType === 'Phone'" ref="authPhoneRef" :phone="form.phone" />
      <AuthEmail v-if="form.mfaType === 'Email'" ref="authEmailRef" :email="form.email" />

      <!-- Google虚拟 MFA 验证 -->
      <div v-if="form.mfaType === 'Google'">
        <el-form-item
          v-if="form.ga"
          label="安全码"
          prop="safeCode"
        >
          <el-input
            v-model="form.safeCode"
            placeholder="输入安全码"
          />
        </el-form-item>

        <div v-else class="my-2 bg-#f5f5f5 p1 text-xs text-#999">
          <div>
            您还没有绑定MFA设备，请进入【安全设置】绑定设备。
            <a
              class="text-blue-500"
              target="_blank"
              href="https://www.syscxp.com/docs/account/mfa"
            >帮助指引</a>
          </div>
        </div>
        <div class="text-xs text-#999 space-y-1">
          <p>
            通过绑定的MFA设备获取安全码的方式。
            如何获取：
          </p>
          <p>方法1：微信添加小程序【二次验证码】 </p>
          <p>方法2：浏览器添加扩展程序【身份验证器】 </p>
          <p>
            方法3：前往应用商店下载手机客户端 <br>
            Android版【Google 身份验证器】 iOS版【Google Authenticator】
          </p>
        </div>
      </div>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="visible = false">
          取 消
        </el-button>
        <el-button type="primary" :loading="loading" @click="confirm">
          确 定
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>
